import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import LoadMore from '@/components/LoadMore'
import Cover from '@/components/Cover'
export default class VideoRelated extends PureComponent {
    listRef = React.createRef()
    static propTypes = {
        videos: PropTypes.array
    }

    get totalPage() {
        return Math.ceil(this.props.videos.length / this.state.pageSize)
    }

    get list() {
        const { pageNum,  pageSize } = this.state 
        return this.props.videos.slice(0, pageNum * pageSize)
    }

    state = {
        pageNum: 1,
        pageSize: 10
    }

    onReachEnd = () => {
        const { pageNum } = this.state   
        if (pageNum < this.totalPage) {
            this.setState({
                pageNum: pageNum + 1
            })
        } else {
            this.complete()
        }
    }

    onRender = (rowData) => {
        return (
            <Cover 
                key={rowData.bvid} 
                play={rowData.stat.view} 
                danmaku={rowData.stat.danmaku} 
                {...rowData} 
            />
        )
    }

    componentDidMount() {      
        this.stopLoading()
    }

    stopLoading = () => {
        this.listRef.current?.stopLoading()
    }

    complete = () => {
        this.listRef.current?.complete()
    }

    render() {
        return (
            <LoadMore                
                ref={this.listRef}
                data={this.list} 
                column={2}
                enableRefresh={false}
                onReachEnd={this.onReachEnd} 
                renderRow={this.onRender}
            />
        )
    }
}
